<template>
	<view>
		<!-- 模态对话框 -->
		<com-modal
		:title="modal.title"
		:content="modal.content"
		:visible="modal.show"
		:bg-color="skinColor.color_bg_2"
		:title-color="skinColor.color_1"
		:content-color="skinColor.color_2"
		:confirm-text="modal.confirmText"
		:cancel-text="modal.cancelText"
		:cancel-show="modal.cancelShow"
		@confirm="handleModalConfirm"
		@cancel="handleModalCancel"
		@hide="handleModalHide"></com-modal>
		
		<!-- 操作列表对话框 -->
		<com-action-sheet
		:title="action.title"
		:data="action.data"
		:visible="action.show"
		:bg-color="skinColor.color_bg_2"
		:title-color="skinColor.color_1"
		:text-color="skinColor.color_2"
		:border-color="skinColor.color_gap_1"
		:cancel-color="skinColor.color_1"
		:cancel-text="action.cancelText"
		:cancel-show="action.cancelShow"
		@confirm="handleActionConfirm"
		@cancel="handleActionCancel"
		@hide="handleActionHide"></com-action-sheet>
	</view>
</template>

<script>
	import SkinColor from '@/assets/skin/index.js'
	export default {
		computed: {
			skinMode () {
				return this.$store.getters['setting/GET_SKIN_MODE']
			},
			skinColor () {
				return SkinColor[this.skinMode]
			}
		},
		data () {
			return {
				modal: {
					show: false,
					title: '',
					content: '',
					confirmText: '确认',
					cancelText: '取消',
					cancelShow: false,
					success: null,
					fail: null,
					complete: null
				},
				action: {
					show: false,
					title: '',
					cancelText: '取消',
					cancelShow: true,
					data: [],
					success: null,
					fail: null,
					complete: null
				}
			}
		},
		methods: {
			handleModalConfirm () {
				this.emitSuccess('modal', {confirm: true})
			},
			handleModalCancel () {
				this.emitSuccess('modal', {confirm: false})
			},
			handleModalHide () {
				this.modal.show = false
				this.emitFail('modal')
			},
			handleActionConfirm (e) {
				this.emitSuccess('action', {confirm: true, ...e})
			},
			handleActionCancel () {
				this.emitSuccess('action', {confirm: false})
			},
			handleActionHide () {
				this.action.show = false
				this.action.data = []
				this.emitFail('action')
			},
			emitSuccess (key, params) {
				this[key].success && this[key].success(params)
				this[key].complete && this[key].complete(params)
			},
			emitFail (key) {
				this[key].fail && this[key].fail()
				this[key].complete && this[key].complete()
			},
			alert (data) {
				this.modal = {...this.modal, ...data, cancelShow: false}
				this.modal.show = true
			},
			confirm (data) {
				this.modal = {...this.modal, ...data, cancelShow: true}
				this.modal.show = true
			},
			actionSheet (data) {
				this.action = {...this.action, ...data}
				this.action.show = true
			}
		}
	}
</script>

<style>
</style>